import { Checkbox } from 'antd';
import { useState } from 'react';
import { YmQueryFilter, YmQueryFilterProps } from 'ym-design';

export default function () {
  type FormValue = { title?: string; status?: number; label?: string[] };

  const formItems: YmQueryFilterProps['formItems'] = [
    {
      label: '标题',
      name: 'title',
      valueType: {
        type: 'input',
      },
    },
    {
      label: '空状态',
      name: 'title1',
    },
    {
      label: '状态',
      name: 'status',
      valueType: {
        type: 'select',
        selectProps: {
          options: [
            {
              label: '开启',
              value: '1',
            },
            {
              label: '关闭',
              value: '2',
            },
          ],
        },
      },
    },
    {
      label: '标签',
      name: 'label',
      children: (
        <Checkbox.Group>
          <Checkbox value="zhatu">渣土</Checkbox>
          <Checkbox value="laji">垃圾</Checkbox>
        </Checkbox.Group>
      ),
    },
    {
      label: '所属组织',
      name: 'label',
      valueType: {
        type: 'select',
        selectProps: {
          options: [
            {
              label: '开启',
              value: '1',
            },
            {
              label: '关闭',
              value: '2',
            },
          ],
        },
      },
    },
  ];

  const [collapsed, setCollapsed] = useState(false);

  return (
    <YmQueryFilter<FormValue>
      collapsed={collapsed}
      labelCol={{ style: { width: 72 } }}
      onFinish={(value) => {
        alert(JSON.stringify(value));
      }}
      onReset={() => {
        alert('表单内容即将重置');
      }}
      onCollapsed={(collapsed) => {
        alert(`系统想要${collapsed ? '折叠' : '展开'}内容`);
        setCollapsed(collapsed);
      }}
      formItems={formItems}
    />
  );
}
